<template>
  <div>
    <!-- 头部搜索栏 -->
    <van-sticky>
    <div class="header">
      <div class="hLeft">
        <van-icon name="cluster" />
      </div>
      <div class="hCenter">
        <form action="/">
        <van-search
          placeholder="请输入"
          class="search"
        />
        </form>
      </div>
      <div class="hRight">
        <van-icon name="shopping-cart" />
      </div>
    </div>
    </van-sticky>
    <!-- end头部搜索栏 -->
    <!-- 导航栏 -->
    <div class="sNav">
      <div class="nav_con">
        <van-grid :gutter="10">
        <van-grid-item  v-for="a in nav" :key="a" v-bind:text="a.text" v-bind:icon="a.img" v-bind:style="{ 'color': a.color}" :to="a.path"/>
        </van-grid>
      </div>
    </div>
    <!-- end导航栏 -->
    <!-- 广告 -->
    <div class="gg1">
      <h1>￥300</h1>
      <div class="xrlb">
        <h2>新人礼包</h2>
      </div>
      <router-link to="/" style="font-size:22px;color:rgba(238, 82, 82, 1);" class="rt1">点此领取>>>></router-link>
      <div class="duan">
        <p>·新垣结衣同款烤箱</p>
        <p>·沃隆坚果 ·小煎锅</p>
      </div>
    </div>
    <!-- end广告 -->
    <!-- 市集上市 -->
    <div class="xjsx">
      <h1>市集上心</h1>
      <h2><router-link to="more" style="color:rgba(238, 82, 82, 1);font-size:15px;line-height:28px;">查看更多</router-link></h2>
      <h3>好评新货，限时折扣</h3>
    </div>
    <!-- end市集上市 -->
    <!-- 滑动组件 -->
    <div class="slide1">
      <md-card-media class="swiper-inner">
      <!-- swiper -->
      <swiper :options="swiperOption" :width=300 style="width:300px;height:233px;">
        <swiper-slide v-for="a in slide" :key="a" style="width:300px;height:233px;">
          <div class="slide2">
            <h1 v-bind:style="{ 'background-image': 'url('+ a.bgimg+')'}">
              <span v-if="a.baoyou">{{ a.baoyou }}</span>
            </h1>
            <h2>{{ a.h1 }}</h2>
            <h3>{{ a.h2 }}</h3>
            <div class="slide3">
              <span class="sp1">{{ a.money1 }}</span>
              <span class="sp2">{{ a.money2 }}</span>
              <span class="sp3">{{ a.pingfen }}</span>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </md-card-media>
    </div>
    <!-- end滑动组件 -->
    <!-- 大图 -->
    <div class="dt" v-for="a in dt" :key="a">
      <div class="dt1" v-bind:style="{'background-image': 'url('+a.bgurl+')'}">
        <h1>{{ a.h1 }}</h1>
        <h2>{{ a.h2 }}</h2>
      </div>
    </div>
    <!-- end大图 -->
    <!-- 猜你喜欢 -->
    <h1 class="cnxh">猜你喜欢</h1>
    <div class="cnxh1">
      <md-card-media>
      <!-- swiper -->
      <swiper :options="swiperOption" style="width:300px;height:263px;">
        <swiper-slide v-for="a in cnxh" :key="a" style="width:300px;height:263px;">
          <div class="cnxh2">
            <h1 v-bind:style="{'background-image': 'url('+a.bgurl+')'}"></h1>
            <h2>{{ a.h2 }}</h2>
            <h3>{{ a.h3 }}</h3>
            <h4>{{ a.h4 }}</h4>
            <h5>{{ a.h5 }}</h5>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </md-card-media>
    </div>
    <!-- end猜你喜欢 -->
    <!-- 底部标签栏 -->
     <van-tabbar
  v-model="active"
  active-color="#07c160"
  inactive-color="#000"
  >
  <van-tabbar-item name="cf" icon="wap-home" to="/">下厨房</van-tabbar-item>
  <van-tabbar-item name="sj" icon="shop-collect">市集</van-tabbar-item>
  <van-tabbar-item name="sc" icon="like" to="/shoucang">收藏</van-tabbar-item>
  <van-tabbar-item name="xj" icon="invition" to="/xj">信籍</van-tabbar-item>
  <van-tabbar-item name="me" icon="manager" to="/wo">我</van-tabbar-item>
</van-tabbar>
    <!-- end底部标签栏 -->
  </div>
</template>
<script>
export default {
    data () {
        return {
            active: 'sj',
            nav: '',
            dt: '',
            cnxh: '',
            swiperOption: {
                effect: 'coverflow',
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: 'auto',
                coverflowEffect: {
                    rotate: 50,
                    stretch: 0,
                    depth: 100,
                    modifier: 1,
                    slideShadows: true
                },
                pagination: {
                    el: '.swiper-pagination'
                }
            }
        };
    },
    created: function () {
        const api = '/shiji.json';
        this.axios.get(api).then((response) => {
            this.nav = response.data.nav;
            this.slide = response.data.slide;
            this.dt = response.data.dt;
            this.cnxh = response.data.cnxh;
        });
    },
    methods: {
    },
    components: {}
};
</script>
<style lang="less">
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  font-size: 14px;
}
.header{
  width: 100%;
  height: 44px;
  background-color: #fff;
  margin-top: 2px;
  .hLeft{
    width: 20%;
    height: 100%;
    font-size: 28px;
    text-align: center;
    padding-top: 8px;
    float: left;
  }
  .hCenter{
    width: 60%;
    height: 100%;
    float: left;
  }
  .hRight{
    width: 20%;
    height: 100%;
    font-size: 28px;
    text-align: center;
    padding-top: 8px;
    float: left;
  }
}
.sNav{
  width: 100%;
  height: 188px;
  margin-top: 10px;
  .nav_con{
    width: 90%;
    height: 100%;
    margin: 0 auto;
  }
}
.gg1{
  width: 100%;
  height: 222px;
  background-color: rgba(248, 248, 248, 1);
  padding-top: 21px;
  h1{
    font-size: 32px;
    color: rgba(238, 82, 82, 1);
    font-weight: bold;
    text-align: center;
  }
  .xrlb{
    width: 186px;
    height: 54px;
    background-color: rgba(238, 82, 82, 1);
    margin: 0 auto;
    text-align: center;
        h2{
      color: rgba(255, 255, 255, 1);
      font-size: 28px;
      line-height: 54px;
    }
    }
        .duan{
      width: 175px;
      height: 54px;
      margin: 0 auto;
      p{
        color: rgba(238, 82, 82, 1);
        font-size: 18px;
        line-height: 150%;
        text-align: center;
      }
  }
}
.xjsx{
  width: 100%;
  height: 66px;
  padding-left: 5%;
  padding-right: 5%;
  h1{
    width: 50%;
    height: 38px;
    font-size: 20px;
    color: rgba(56, 56, 56, 1);
    line-height: 38px;
    text-align: left;
    float: left;
  }
  h2{
      width: 50%;
      height: 28px;
      text-align: right;
      float: left;
    }
    h3{
      width: 50%;
      height: 28px;
      text-align: left;
      color: rgba(166, 166, 166, 1);
    }
}
.slide1{
  width: 100%;
  height: 233px;
  padding-left: 5%;
  .slide2{
    width: 40%;
    height: 233px;
    margin: 0 auto;
    h1{
      width: 100%;
      padding-top: 100%;
      background-size: 100% 100%;
      position: relative;
      span{
        display: block;
        position: absolute;
        background-color: rgba(255, 213, 59, 1);
        color: rgba(74, 74, 74, 1);
        top: 8px;
        left:9px;
        width: 44px;
        height: 22px;
        border-radius: 5px;
      }
    }
    h2{
        width: 100%;
        height: 24px;
        color: rgba(56, 56, 56, 1);
        text-align: left;
        font-weight: bold;
        line-height: 24px;
        margin-top: 3px;
      }
      h3{
        width: 100%;
        height: 24px;
        color: rgba(166, 166, 166, 1);
        text-align: left;
        line-height: 24px;
      }
  }
  .slide3{
    width: 100%;
    height: 24px;
    .sp1{
      display: inline-block;
      color: rgba(238, 82, 82, 1);
      font-weight: bold;
    }
    .sp2{
      display: inline-block;
      color: rgba(128, 128, 128, 1);
      text-decoration: line-through;
    }
    .sp3{
      margin-left: 15px;
    }
  }
}
.dt{
  width: 100%;
  margin-top: 10px;
  .dt1{
    width: 90%;
    height: 206px;
    background-size: 100% 100%;
    margin: 0 auto;
    position: relative;
    h1{
      width: 286px;
      height: 54px;
      position: absolute;
      top: 115px;
      left: 26px;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      font-weight: bold;
      text-align: left;
    }
    h2{
      width: 286px;
      height: 24px;
      color: rgba(255, 255, 255, 1);
      position: absolute;
      top: 170px;
      left: 26px;
      text-align: left;
    }
  }
}
.cnxh{
  width: 100%;
  height: 38px;
  font-size: 20px;
  color: rgba(56, 56, 56, 1);
  padding-left: 5%;
  text-align: left;
  margin-top: 10px;
  line-height: 38px;
}
.cnxh2{
  width: 164px;
  height: 100%;
  margin: 0 auto;
  h1{
    width: 100%;
    height: 164px;
    background-size: 100% 100%;
  }
  h2{
    width: 100%;
    height: 44px;
    margin-top: 5px;
    color: rgba(56, 56, 56, 1);
    font-weight: bold;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  h3{
    width: 100%;
    height: 24px;
    margin-top: 5px;
    color: rgba(166, 166, 166, 1);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  h4{
    width: 47px;
    height: 24px;
    color: rgba(238, 82, 82, 1);
    font-weight: bold;
    font-size: 13px;
    float: left;
  }
  h5{
    width: 91px;
    height: 24px;

    color: rgba(128, 128, 128, 1);
    font-size: 13px;
    float: right;
  }
}
</style>
